<template>
	<view class="c-userlist">
		<view class="c-userlist-search">
			<input type="text" @input="onSearchKey" v-model="key" value="" placeholder="搜索" class="c-userlist-search-txt" />
			<view class="c-userlist-search-btn" @click="onSearchUserByKey">确定</view>
		</view>
		<view class="c-userlist-tip">
			通讯录
		</view>
		<view class="c-userlist-body">
			<view class="c-userlist-body-box" @click="onGetUserName(item)" v-for="(item, index) in items" :key="item.ID">
				<text>{{item.UserName}}</text>
			</view>
			<view class="c-userlist-body-box" v-show="length==0">
				<text>没有找到相关用户！</text>
			</view>
		</view>
	</view>
</template>

<script>
	let pageApp = getApp();
	export default {
		data() {
			return {
				items: [],
				key: "",
				length: 1,
				id: 0
			}
		},
		onLoad: function(options) {
			this.onSearchUserByKey();
			this.id = options.id;
		},
		methods: {
			onSearchKey(e) {
				this.key = e.detail.value;
			},
			onGetUserName(item) {
				// 获取对象，并保存在本地
				uni.setStorageSync("searchUser", item);
				// 返回列表页面
				let url = 'WeeklyReportEdit?type=1';
				if (this.id) {
					url = url + "&id=" + this.id;
				}
				uni.navigateTo({
					url: url
				})
			},
			onSearchUserByKey() {
				let str = this.key.trim();
				let data = {};
				if (str.length > 0) {
					data = {
						UserName: str
					}
				}
				// 准备请求数据
				let apiData = {
					url: pageApp.globalData.url + "/UserList",
					data: data,
					success: (d) => {
						this.items = d.data.data.items;
						this.length = this.items.length;
					}
				}
				// 发送数据请求
				this.vjAjaxData(apiData)
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}

	.c-userlist-search {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
	}

	.c-userlist-search-txt {
		background-color: #F1F5F6;
		padding: 16rpx 30rpx;
		border-radius: 30rpx;
		width: 100%;
	}

	.c-userlist-search-btn {
		width: 80rpx;
		position: absolute;
		right: 20rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 0 30rpx 30rpx 0;
		padding: 12rpx 30rpx 12rpx 50rpx;
	}

	.c-userlist-tip {
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.c-userlist-body {
		padding: 0rpx 40rpx;
		background-color: #fff;
	}

	.c-userlist-body-box {
		padding: 20rpx;
		border-bottom: solid 2rpx #F1F5F6;
	}
</style>
